<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>招新详情</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <style>
        .w300{
            width: 300px !important;
        }
        .marr50{margin-right:50px!important;}
        .layui-inline{ margin-right:0!important;}
    </style>
</head>
<body>
<div class="page-content-wrap clearfix">
    <form class="layui-form" id="">
        <div class="layui-tab">
            <div class="layui-tab-content">
                <div class="div-tit-top"><span></span>招生信息</div>
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="red">*</span>标题：</label>
                        <div class="layui-input-inline w300 marr50">
                            <input type="text" name="name" id="titleName" value="${wxAssociationNew.title}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" maxlength="200" readonly>
                        </div>
                        <label class="layui-form-label"><span class="red">*</span>最多报社团数：</label>
                        <div class="layui-input-inline w300">
                            <input type="text" name="name" id="maxNumber" value="${wxAssociationNew.maxAssoNum}" lay-verify="required" placeholder="请输入最多报社团数" autocomplete="off" class="layui-input" maxlength="200" readonly>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="red">*</span>开始日期：</label>
                            <div class="layui-input-inline w300 marr50">
                                <input type="text" name="startDate" id="startDate" value="<#if wxAssociationNew.beginDate??>${wxAssociationNew.beginDate?string('yyyy-MM-dd')}</#if>"  lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" readonly>
                            </div>
                            <label class="layui-form-label"><span class="red">*</span>结束日期：</label>
                            <div class="layui-input-inline w300">
                                <input type="text" name="endDate" id="endDate" value="<#if wxAssociationNew.endDate??>${wxAssociationNew.endDate?string('yyyy-MM-dd')}</#if>" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="red">*</span>开始时间：</label>
                            <div class="layui-input-inline w300 marr50">
                                <input type="text" name="startTime" id="startTime" lay-verify="date" value="${wxAssociationNew.beginTime}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" readonly>
                            </div>
                            <label class="layui-form-label"><span class="red">*</span>结束时间：</label>
                            <div class="layui-input-inline w300">
                                <input type="text" name="endTime" id="endTime" lay-verify="date" value="${wxAssociationNew.endTime}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="div-tit-top"><span></span>社团招新对象</div>
                <form class="layui-form">
                    <div class="search-cont clearfix" id="tool">
                        <div class="operation-btn-cont">
                            <div class="operright cyt-retract-close hideMenu"> 收起筛选<i class="iconfont">&#xe658;</i></div>
                            <div class="operright cyt-retract-open showMenu" style="display: none;"> 展开筛选<i class="iconfont">&#xe936;</i></div>
                            <div class="triangle-bottom"></div>
                            <div class="triangle-top"></div>
                        </div>
                        <div class="search-details">
                            <div class="layui-form-item marb5">
                                <!--search开始-->
                                <div class="layui-inline">
                                    <label class="layui-form-label" >姓名：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="userName" name="userName" placeholder="请输入姓名"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label" >学号：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="userNumber" name="title" placeholder="请输入学号"  autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" >年级：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="gradeName" name="title" placeholder="请输入年级" autocomplete="off" class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-inline">
                                    <label class="layui-form-label" >班级：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" id="className" name="title" placeholder="请输入班级" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <!--search结束-->
                                <div class="layui-inline marl8">
                                    <button class="layui-btn layui-btn-normal" type="button" id="searchBtn">搜索</button>
                                    <button class="layui-btn layui-btn-normal" type="button" id="resetBtn">重置</button>
                                </div>
                            </div>
                        </div>
                        <table class="table-list-tr" id="showTable">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>年级</th>
                                <th>班级</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <div id="page">
                        </div>
                        <div class="div-tit-top" style="margin-top:20px;"><span></span>招新社团</div>
                        <div class="society-list clearfix" id="content">
                        </div>
                        <div id="pageother">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="margin-left: 0px !important;text-align: center">
                <button type="button" id="cancel" class="layui-btn layui-btn-primary">取消</button>
                <button type="button" style="display: none;" id="save" class="layui-btn layui-btn-primary"></button>
            </div>
        </div>
    </form>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/mobile/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>

    var applyId='${applyId}';
    var menuId='${parentMenuId}';
    var page = null;
    var baseutil = null;
    var dialog = null;
    var form = null;
    var newAssocaitionId ='${id}';
    var associationStu='1';
    var curr = 1;// 当前页，初始值设为 1
    var limit = 10;// 每页条数，初始值设为 10
    var total;// 总记录数
    layui.use(['form', 'jquery','table', 'fileUtil', 'dialog', 'layer','page', 'layedit', 'baseutil','laydate','upload'], function () {
        var $ = layui.jquery,
            laydate = layui.laydate,
            page = layui.page;


        $(document).ready(function () {
            //一进入就硬删除那写明没有用的数据
            getInfo();// 获取数据
            debugger;
            toPage();// 进行分页

            if(newAssocaitionId.length>0){
                getassociationMessage(newAssocaitionId);
                toPageOther();
            }
        });
        // 查询
        $('#searchBtn').bind('click', function () {
            getInfo();// 获取数据
            toPage();// 进行分页



        });
        // 重置
        $('#resetBtn').bind('click', function () {
            $("#userNumber").val("");
            $("#gradeName").val("");
            $("#className").val("");
            $("#userName").val("");
            getInfo();// 获取数据
            toPage();// 进行分页

        });


        function getInfo() {
            var userNumber = $("#userNumber").val();
            var gradeName = $("#gradeName").val();
            if(newAssocaitionId.length>0){
            }else {
                //刚刚导入的人员显示在上面其他的人员不显示在上面
                newAssocaitionId ="88888888";
            }
            $.ajax({
                type: "post",
                url: "/work/wxassociationnewstu/wxassociationnewstu/findPage",
                async: false,// 设置同步请求，加载数据前锁定浏览器
                dataType: 'json',
                data: {
                    "page": curr, // 查询页码
                    "limit": limit, // 每页条数
                    "userNumber":userNumber,
                    "gradeName":gradeName,
                    "applyId":applyId,
                    "associationNewId":newAssocaitionId

                },
                success: successFu
            });
        }

        function getassociationMessage(newAssocaitionId) {
            $.ajax({
                type: "post",
                url: "/work/wxassocationnewDetail/wxassociationnewdetail/findVoPage",
                async: false,// 设置同步请求，加载数据前锁定浏览器
                dataType: 'json',
                data: {
                    "page": curr, // 查询页码
                    "limit": limit, // 每页条数
                    "applyId":applyId,
                    "associationNewId":newAssocaitionId
                },
                success: successMessage
            });
        }

        function successMessage(pager) {
            $("#content").html("");
            total = pager.count;
            if (pager.total == 0) {
                return;
            }
            var text = '<ul>';
            $.each(pager.data, function (i, item) {
                var  pathString = '/sysFile/showFileByPath?path=' + item.path;

                text+='<li>'+
                    '<div class="toppic" style="background: url('+pathString+') top center no-repeat;background-size: cover;"></div>'+
                    '</div>'+
                    '<h1>'+item.title+'</h1>'+
                    '<h2>指导老师：<span>'+item.userName+'</span></h2>'+
                    '<h2>招新<span class="num-blue">'+item.totalNumber+'</span>人，已招<span class="num-blue">'+item.stuNumber+'</span> 人</h2>'+
                    '</li>';
            });
            text +='</ul>';
            $("#content").html(text);

        }

        function successFu(pager) {
            associationStu = pager.count;
            total = pager.count;
            // 3.渲染数据
            // 当前查询无数据时
            if (pager.total == 0) {
                return;
            }
            var text = '';
            $.each(pager.data, function (i, item) {
                var mark = i+1;
                text +='<tr>'+
                    '<td>'+mark+'</td>'+
                    '<td>'+item.userNumber+'</td>'+
                    '<td>'+item.userName+'</td>'+
                    '<td>'+item.gradeName+'</td>'+
                    '<td>'+item.className+'</td>'+
                    '</tr>';
            });
            $("#showTable tbody").html(text);

        }

        // 进行分页
        function toPage() {
            // 调用分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                // 调用分页
                laypage.render({
                    elem: 'page',// *必选参数
                    count: total,// *必选参数
                    limits: [10, 25, 50, 100],
                    // 自定义首页、尾页、上一页、下一页文本
                    first: '首页',
                    last: '尾页',
                    prev: '<em><<</em>',
                    next: '<em>>></em>',
                    // 自定义主题
                    theme: "#FF5722",
                    // 自定义排版
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    // 渲染数据
                    jump: function (data, first) {
                        // data包含了当前分页的所有参数
                        curr = data.curr;
                        limit = data.limit;

                        // 首次不执行
                        if (!first) {
                            getInfo();
                        }
                    }
                });
            })
        }

        // 进行分页
        function toPageOther() {
            // 调用分页
            layui.use('laypage', function () {
                var laypage = layui.laypage;
                // 调用分页
                laypage.render({
                    elem: 'pageother',// *必选参数
                    count: total,// *必选参数
                    limits: [10, 25, 50, 100],
                    // 自定义首页、尾页、上一页、下一页文本
                    first: '首页',
                    last: '尾页',
                    prev: '<em><<</em>',
                    next: '<em>>></em>',
                    // 自定义主题
                    theme: "#FF5722",
                    // 自定义排版
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                    // 渲染数据
                    jump: function (data, first) {
                        // data包含了当前分页的所有参数
                        curr = data.curr;
                        limit = data.limit;

                        // 首次不执行
                        if (!first) {
                            getassociationMessage(newAssocaitionId);
                        }
                    }
                });
            })
        }

        $("#cancel").on("click",function () {
            parent.tabDelete('associationdetail');
        });

    });
</script>
</body>
</html>